<template>
	<div>
		<div class="videolink"></div>
		<img src="../../static/image/closepdf.png" class="closelinkimg" @click="closeremotevideo" />
		<video class="remotevideo" autoplay muted controls webkit-playsinline playsinline x5-playsinline x-webkit-airplay="true" :src="remotevideourl" id="remotevideolink"> </video>
	</div>
</template>

<script>
export default {
	name: 'RemoteVideo',
	props: {
		responseViewResource: {
			type: Function,
			default: null
		},
		remotevideourl: {
			type: String,
			required: true,
			default: () => ''
		},
		cmdId: {
			type: Number,
			required: true,
			default: () => 0
		},
		clientId: {
			type: String,
			required: true,
			default: () => ''
		}
	},
	mounted() {},
	methods: {
		closeremotevideo() {
			this.$emit('closeremotevideo');
			document.getElementById('remotevideolink').pause();
			document.getElementById('remotevideolink').src = '';
		}
	}
};
</script>

<style scoped>
.videolink {
	width: 100%;
	height: 100%;
	/*background: white;*/
	background: rgba(51, 51, 51, 0.72);
	/*opacity:0.2983;*/
	position: absolute;
	top: 0;
	left: 0;
}

.remotevideo {
	width: 100%;
	height: 60%;
	position: absolute;
	left: 0;
	top: 10%;
}
.closelinkimg {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1000;
}
</style>
